<template>
  <a-card :bordered="false">
    <j-modal
      :title="title"
      :width="width"
      :visible="true"
      @cancel="handleCancel"
      wrapClassName="ant-modal-cust-warp"
      style="top:5%;height: 100%;overflow-y: hidden">

      <template slot="footer">
        <!--此处为解决缓存问题-->
        <a-button v-if="billType === '销售订单'" v-print="'#saleOrderPrint'" ghost type="primary">打印</a-button>
        <a-button v-if="billType === '销售出库'" v-print="'#saleOutPrint'" ghost type="primary">打印</a-button>
        <a-button v-if="billType === '报价单'" v-print="'#saleOutPrint'" ghost type="primary">打印</a-button>
        <a-button v-if="billType === '客户销售订单'" v-print="'#saleOrderPrint'" ghost type="primary">打印</a-button>
        <a-button v-if="billType === '客户销售出库'" v-print="'#saleOutPrint'" ghost type="primary">打印</a-button>
        <a-button key="back" @click="handleCancel">取消</a-button>
      </template>
      <a-form :form="form">


        <!--销售订单-->
        <template v-if="billType === '销售订单'">
          <section ref="print" id="saleOrderPrint">
            <a-row class="form-row" :gutter="24">
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户">
                  <a-input v-decorator="['id']" hidden/>
                  {{model.organName}}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.operTimeStr}}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.number}}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售人员">
                  {{model.salesManStr}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :pagination="false"
              :columns="saleOrderColumns"
              :dataSource="dataSource">
            </a-table>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                  {{model.remark}}
                </a-form-item>
              </a-col>
            </a-row>
          </section>
        </template>
        <!--销售出库-->
        <template v-else-if="billType === '销售出库'">
          <section ref="print" id="saleOutPrint">
            <a-row class="form-row" :gutter="24">
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户">
                  <a-input v-decorator="['id']" hidden/>
                  {{model.organName}}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.operTimeStr}}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.number}}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="关联订单">
                  {{model.linkNumber}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :pagination="false"
              :columns="saleOutColumns"
              :dataSource="dataSource">
            </a-table>
            <a-row class="form-row" :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="" style="padding:20px 10px;">
                  {{model.remark}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="form-row" :gutter="24">
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="优惠率">
                  {{model.discount}}%
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收款优惠">
                  {{model.discountMoney}}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :labelCol="{xs: { span: 24 },sm: { span: 6 }}" :wrapperCol="wrapperCol" label="优惠后金额">
                  {{model.discountLastMoney}}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="其它费用">
                  {{model.otherMoney}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="form-row" :gutter="24">
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结算账户">
                  {{model.accountName}}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次收款">
                  {{model.changeAmount}}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="本次欠款">
                  {{model.debt}}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售人员">
                  {{model.salesManStr}}
                </a-form-item>
              </a-col>
            </a-row>
          </section>
        </template>

        <template v-else-if="billType === '报价单'">
          <section ref="print" id="saleOutPrint2">
            <a-row class="form-row" :gutter="24">
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户">
                  <a-input v-decorator="['id']" hidden/>
                  {{model.supplierName}}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                  {{model.createTime}}
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                  {{model.billNo}}
                </a-form-item>
              </a-col>
            </a-row>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :pagination="false"
              :columns="saleOutColumns2"
              :dataSource="dataSource">
            </a-table>
          </section>
        </template>
      </a-form>
    </j-modal>
  </a-card>
</template>

<script>
import pick from 'lodash.pick'
import { getAction } from '@/api/manage'
import { getMpListShort } from "@/utils/util"
import Vue from 'vue'
export default {
  name: 'BillDetail3',
  props: ['idss','visible','billType','engineeringId'],
  data () {
    return {
      title: "详情",
      width: '1450px',
      model: {},

      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      form: this.$form.createForm(this),
      loading: false,
      dataSource: [],
      url: {
        detailList: '/depotItem/getDetailList',
        getEgnDetailList: '/engineering/findEngineeringDepotLink'
      },
      allocationOutColumns: [
        { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
        { title: '条码', dataIndex: 'barCode', width: '10%'},
        { title: '名称', dataIndex: 'name', width: '8%'},
        { title: '规格', dataIndex: 'standard', width: '5%'},
        { title: '型号', dataIndex: 'model', width: '5%'},
        { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
        { title: '库存', dataIndex: 'stock', width: '5%'},
        { title: '调入仓库', dataIndex: 'anotherDepotName', width: '8%'},
        { title: '单位', dataIndex: 'unit', width: '4%'},
        { title: '数量', dataIndex: 'operNumber', width: '5%'},
        { title: '单价', dataIndex: 'unitPrice', width: '5%'},
        { title: '金额', dataIndex: 'allPrice', width: '5%'},
        { title: '备注', dataIndex: 'remark', width: '5%'}
      ],

      saleOrderColumns: [
        { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
        { title: '条码', dataIndex: 'barCode', width: '10%'},
        { title: '名称', dataIndex: 'name', width: '8%'},
        { title: '规格', dataIndex: 'standard', width: '5%'},
        { title: '型号', dataIndex: 'model', width: '5%'},
        { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
        { title: '库存', dataIndex: 'stock', width: '5%'},
        { title: '单位', dataIndex: 'unit', width: '4%'},
        { title: '数量', dataIndex: 'operNumber', width: '5%'},
        { title: '单价', dataIndex: 'unitPrice', width: '5%'},
        { title: '金额', dataIndex: 'allPrice', width: '5%'},
        { title: '备注', dataIndex: 'remark', width: '5%'}
      ],
      saleOutColumns: [
        { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
        { title: '条码', dataIndex: 'barCode', width: '10%'},
        { title: '名称', dataIndex: 'name', width: '8%'},
        { title: '规格', dataIndex: 'standard', width: '5%'},
        { title: '型号', dataIndex: 'model', width: '5%'},
        { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
        { title: '库存', dataIndex: 'stock', width: '5%'},
        { title: '单位', dataIndex: 'unit', width: '4%'},
        { title: '数量', dataIndex: 'operNumber', width: '5%'},
        { title: '单价', dataIndex: 'unitPrice', width: '5%'},
        { title: '含税单价', dataIndex: 'taxUnitPrice', width: '6%'},
        { title: '金额', dataIndex: 'allPrice', width: '5%'},
        { title: '税率(%)', dataIndex: 'taxRate', width: '6%'},
        { title: '税额', dataIndex: 'taxMoney', width: '5%'},
        { title: '价税合计', dataIndex: 'taxLastMoney', width: '6%'},
        { title: '备注', dataIndex: 'remark', width: '5%'}
      ],
      saleOutColumns2: [
        { title: '仓库名称', dataIndex: 'depotName', width: '8%'},
        { title: '条码', dataIndex: 'barCode', width: '10%'},
        { title: '名称', dataIndex: 'materialName', width: '8%'},
        { title: '规格', dataIndex: 'materialType', width: '5%'},
        { title: '型号', dataIndex: 'model', width: '5%'},
        { title: '扩展信息', dataIndex: 'materialOther', width: '6%'},
        { title: '库存', dataIndex: 'stock', width: '5%'},
        { title: '单位', dataIndex: 'materialUnit', width: '4%'},
        { title: '数量', dataIndex: 'operNumber', width: '5%'},
        { title: '单价', dataIndex: 'commodityDecimal', width: '5%'},
        { title: '含税单价', dataIndex: 'taxRateCommodityDecimal', width: '6%'},
        { title: '金额', dataIndex: 'commodityPrice', width: '5%'},
        { title: '税率(%)', dataIndex: 'taxRateCommodity', width: '6%'},
        { title: '税额', dataIndex: 'taxRateCommodityMoney', width: '5%'},
        { title: '价税合计', dataIndex: 'taxCommodityDecimalTotal', width: '6%'},
        { title: '备注', dataIndex: 'remark', width: '5%'}
      ]
    }
  },
  created () {
  },
  methods: {
    show(record, type) {

      console.log('show',record,'aaaaaaaaaaaaaaaa')
      this.billType = type
      this.visible = true;
      this.model = Object.assign({}, record);
      this.model.debt = (this.model.discountLastMoney + this.model.otherMoney - this.model.changeAmount).toFixed(2)
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model,'id'))
      });
      let params = null;

      let url = '';

      if(type == '报价单'){
        params = {
          billId: this.model.id,
          engineeringId:this.engineeringId,
          mpList: getMpListShort(Vue.ls.get('materialPropertyList'))  //扩展属性
        }
        url  =  this.url.getEgnDetailList ;
        this.requestSubTableData2(url, params);
      }else if(type == '销售出库'){
        params = {
          headerId: this.model.headerId,
          mpList: getMpListShort(Vue.ls.get('materialPropertyList'))  //扩展属性
        }
        url  =  this.url.detailList ;
        this.requestSubTableData(url, params);
      }


    },
    requestSubTableData2(url, params, success) {
      this.loading = true
      getAction(url, params).then(res => {
        if(res && res.code === 0){
          this.dataSource = res.data.row
          typeof success === 'function' ? success(res) : ''
        }
      }).finally(() => {
        this.loading = false
      })
    },

    requestSubTableData(url, params, success) {
      this.loading = true
      getAction(url, params).then(res => {
        if(res && res.code === 200){
          this.dataSource = res.data.rows
          typeof success === 'function' ? success(res) : ''
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('guan');
      this.visible = false;
    }
  }
}
</script>

<style scoped>

</style>